<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      color: pink;
    }

    li {
      font-size: 24px;
      line-height: 3em;
    }

    li:nth-child(2n) {
      color: red;
    }

    li:nth-child(2n+1) {
      color: green;
    }
  </style>
</head>

<body>
  <!-- <div class="divClass" id="divId" style="color: red;background-color: blue;" contenteditable="true">
    123
  </div> -->


  <ul>
    <li data-index="0">我是li01</li>
    <li data-index="1">我是li02</li>
    <li data-index="2">我是li03</li>
    <li data-index="3">我是li04</li>
    <li data-index="4">我是li05</li>
  </ul>







  <script>
    // let div = document.querySelector("div")
    // console.log(div.getAttribute("style"));//获取行内样式 字符串类型
    // console.log(getComputedStyle(div).color);//获取最终元素那刻渲染达的样式
    // console.log(div.style.color);//获取行内样式 样式的定义数据类型


    let lis = document.querySelectorAll("li")


    // 以前的使用 var的话 要配合自定义属性data-
    // for (var i = 0; i < lis.length; i++) {
    //   lis[i].addEventListener("click", function () {
    //     // console.log(i);
    //     console.log(this.getAttribute("data-index"));
    //   })
    // }


    // 如果不使用自定义属性的话 就用第二种方法如下
    // for (var i = 0; i < lis.length; i++) {

    //   liClick(i);


    // }
    // function liClick(j) {
    //   lis[j].addEventListener("click", function () {
    //     console.log(j);
    //   })
    // }

    // 第二种方法优化

    for (var i = 0; i < lis.length; i++) {

      (function liClick(j) {
        lis[j].addEventListener("click", function () {
          console.log(j);
        })
      })
        (i)
    }







  </script>
</body>

</html>